<template>
  <div class='branch-manage' v-loading="loading" element-loading-text="加载中。。。">
    <el-card>
      <el-form ref='queryForm' :model='queryForm' size='mini' label-position="top">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label='机构号' prop='brnoList'>
              <el-input v-model="queryForm.brnoList" placeholder="请输入机构号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label='机构中文名称' prop='brnoName'>
              <el-input v-model='queryForm.brnoName' placeholder='请输入机构中文名称'></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label='机构属性' prop='brnoProp'>
              <el-select v-model="queryForm.brnoProp" placeholder="请选择机构属性">
                <el-option v-for="item in brnoProp" :key="item.value" :label="item.label" :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label='机构状态' prop='brnoState'>
              <el-select v-model="queryForm.brnoState" placeholder="请选择机构状态">
                <el-option v-for="item in brnoState" :key="item.value" :label="item.label" :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="2" :md="3" class="searchBtnMarginTop">
            <el-button type='primary' size='mini' icon='el-icon-search' @click="tableQuery">查询</el-button>
          </el-col>
          <el-col :lg="2" :md="3" class="searchBtnMarginTop">
            <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('queryForm')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:10px;">
      <el-row>
        <el-col :lg="2" :md="3">
          <el-button type='primary' size='mini' icon='el-icon-plus' v-if="btnPermission('Button_DevBrand_Add')"
            @click='branchAdd()'>添加</el-button>
        </el-col>
        <el-col :lg="2" :md="3">
          <el-button type='primary' size='mini' icon='el-icon-edit' :disabled="currentRow.length!=1" v-if="btnPermission('Button_DevBrand_Add')"
            @click='branchUpdate()'>修改</el-button>
        </el-col>
        <el-col :lg="2" :md="3">
          <el-button type='danger' size='mini' :disabled="currentRow.length!=1" v-if="btnPermission('Button_DevBrand_Add')"
            @click='delBranch()'>删除</el-button>
        </el-col>
        <el-col :lg="2" :md="3">
          <el-button type='primary' size='mini' :disabled="currentRow.length!=1" v-if="btnPermission('Button_DevBrand_Add')"
            @click='detailBranch()'>查看详情</el-button>
        </el-col>
      </el-row>
      <!-- 新增 -->
      <!-- 列表 -->
      <el-table ref="tableDateList" :data='tableDateList' border max-height="400" width='100%' class="tableMarginTop"
        header-row-class-name="tableHeaderClass" highlight-current-row @selection-change="handleCurrentChangeTable">
        <el-table-column type="selection" width="40px"></el-table-column>
        <el-table-column prop='branchnum' label='机构号' fixed></el-table-column>
        <el-table-column prop='branchname' label='机构名称'></el-table-column>
        <el-table-column prop='personinchargecontactphone' label='负责人电话' min-width='107px'></el-table-column>
        <el-table-column prop='branchpersonincharge' label='机构负责人'></el-table-column>
        <el-table-column prop='branchabbr' label='机构简称'></el-table-column>
        <el-table-column prop='branchattr' label='机构属性' :formatter="propFormat"></el-table-column>
        <el-table-column prop='branchaddr' label='机构地址'></el-table-column>
        <el-table-column prop='branchstate' label='机构状态' :formatter="stateFormat"></el-table-column>
        <el-table-column prop='branchcontactname' label='机构联系人姓名' ></el-table-column>
        <el-table-column prop='branchcontactphone' label='机构联系人电话' ></el-table-column>
      </el-table>
      <div style="text-align:right;margin-top:20px">
        <el-pagination background @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
          layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-card>
    <keep-alive>
      <component :is='dialogList.updateBranch' :createData='dialogOptions' @refreshTable="refreshTable"></component>
    </keep-alive>
    <keep-alive>
      <component :is='dialogList.detailBranch' :detailData='dialogOptionsDetail'></component>
    </keep-alive>
  </div>
</template>

<script>
  import request from "@/common/utils/request";
  import tableQuery from "@/message/branchManage/branch/branch-info-query";
  import branchDel from "@/message/branchManage/branch/branch-info-del";
  import updateBranch from "./dialog/updateBranch";
  import detailBranch from "./dialog/detailBranch";
  import getGlobalParams from "@/common/utils/getGlobalParams";

  export default {
    data() {
      return {
        total: 0, //表格总条数
        pageSize: undefined, //
        enumBrnoProp: [],
        enumBrnoState: [],
        currentPage: 1,
        tableDateList: [], //表格数据
        brnoState: [], //机构状态下拉框
        brnoProp: [], //机构属性下拉框
        brnoList: [],
        queryForm: {
          brnoState: "",
          brnoProp: "",
          brnoName: "",
          brnoList: ""
        },
        currentRow: [],
        loading: false,
        dialogList: {
          updateBranch,
          detailBranch
        },
        dialogOptions: {
          isShow: false
        },
        dialogOptionsDetail: {
          isShow: false
        }
      };
    },
    created: function () {
      this.pageSize = getGlobalParams.get("PageSize");
      this.brnoProp = getGlobalParams.get("brnoProp");
      this.brnoState = getGlobalParams.get("brnoState");
      this.enumBrnoProp = this.enumDate(this.brnoProp);
      this.enumBrnoState = this.enumDate(this.brnoState);
      this.tableQuery();
    },
    methods: {
      detailBranch() {
        this.dialogOptionsDetail.isShow = true;
        this.dialogOptionsDetail.currentRow = this.currentRow[0];
      },
      enumDate(val) {
        let temp = [];
        val.forEach(element => {
          temp[element.value] = element.label;
        });
        return temp;
      },
      propFormat(row, column) {
        //格式化表格
        return this.enumBrnoProp[row[column.property]];
      },
      stateFormat(row, column) {
        //格式化表格
        return this.enumBrnoState[row[column.property]];
      },
      handleCurrentChange(val) {
        //分页事件
        this.currentPage = val;
        this.tableQuery();
      },
      handleCurrentChangeTable(val) {
        console.log(val);
        this.currentRow = val;
        //表格事件
      },
      clearForm(item) {
        //清除表单数据
        this.$refs["" + item].resetFields();
      },
      refreshTable() {
        //刷新数据并清除选中的数据
        this.tableQuery();
      },
      tableQuery() {
        this.loading = true;
        let resBody = new tableQuery();
        resBody.data.BranchNum = this.queryForm.brnoList; //this.$store.getters.BranchNum;
        resBody.data.BranchName = this.queryForm.brnoName;
        resBody.data.BranchAttr = this.queryForm.brnoProp;
        resBody.data.BranchState = this.queryForm.brnoState;
        resBody.data.start = (this.currentPage - 1) * this.pageSize;
        resBody.data.length = this.pageSize;
        request(resBody)
          .then(response => {
            this.total = response.RspInfo.recordsTotal ?
              response.RspInfo.recordsTotal :
              0;
            this.tableDateList = [];
            if (response.APP_HEAD.ReturnCode === "000000") {
              this.loading = false;
              this.tableDateList = response.RspInfo.pageList;
            } else {
              this.loading = false;
              this.$message({
                type: "success",
                message: `${response.SYS_HEAD.ReturnMessage}!`
              });
            }
          })
          .catch(error => {
            this.loading = false;
            //   this.logger.log("fail", error);
          });
      },
      sureDel() {
        //删除
        this.loading = true;
        let resBody = new branchDel();
        resBody.data.BranchNum = this.currentRow[0].branchnum;
        request(resBody)
          .then(response => {
            if (response.APP_HEAD.ReturnCode === "000000") {
              this.$message({
                type: "success",
                message: "机构信息删除成功!"
              });
              this.refreshTable();
            } else {
              this.$message({
                type: "success",
                message: `${response.SYS_HEAD.ReturnMessage}!`
              });
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
            this.$message({
              type: "info",
              message: error
            });
          });
      },
      branchUpdate() {
        //修改
        this.dialogOptions.isShow = true;
        this.dialogOptions.currentRow = this.currentRow[0];
        this.dialogOptions.title = "修改机构信息";
        this.dialogOptions.isDisabled = true;
        this.dialogOptions.logo = "2";
      },
      branchAdd() {
        //添加
        this.dialogOptions.isShow = true;
        this.dialogOptions.title = "添加机构信息";
        this.dialogOptions.isDisabled = false;
        this.dialogOptions.logo = "1";
      },
      delBranch() {
        //删除弹窗
        this.$confirm("此操作将永久删除该机构信息, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.sureDel();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
      // filterNode(value, data) {
      //   console.log(value)
      //   if (!value) return true;
      //   return data.label.indexOf(value) !== -1;
      // },
    }
  };

</script>


<style lang="scss">
  .cardStyle {
    margin: 5px 0;
  }

  .listEdit {
    text-align: right;

    & a {
      margin: 5px;
    }
  }

  .demo-table-expand .el-form-item {
    margin-bottom: 0;
  }

</style>
